@use "sass:math";

// 文本 text
// ------------------------
// Font Family
$font-family-base: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
$font-family-en: Helvetica Neue, Arial, sans-serif;

.font-en{
  font-family: $font-family-en;
}

// font 大小
$fonts: 12, 14, 16, 18, 20, 24, 30, 36, 44, 56, 64, 72;
@each $s in $fonts {
  .font-#{$s}{
    font-size: $s + px !important;
  }
}

@mixin typography-title($fontSize, $lineHeight) {
  margin-bottom: 0.5em;
  color: $--color-text-primary;
  font-weight: 600;
  font-size: $fontSize;
  line-height: $lineHeight;
  overflow-wrap: break-word;
}
.h1{ @include typography-title(38px, 1.23); }
.h2{ @include typography-title(30px, 1.35); }
.h3{ @include typography-title(24px, 1.35); }
.h4{ @include typography-title(20px, 1.4); }
.h5{ @include typography-title(16px, 1.5); }

.blue{ color: $--color-blue !important; }
.green{ color: $--color-green !important; }
.red{ color: $--color-red !important; }
.orange{ color: $--color-orange !important; }
.gray{ color: $--color-gray !important; }

// font位置
.tal{ text-align: left !important; }
.tac{ text-align: center !important; }
.tar{ text-align: right !important; }
.taj{ text-align: justify !important; }
.vat{ vertical-align: top !important; }
.vam{ vertical-align: middle !important; }
.vab{ vertical-align: bottom !important; }

// font weight
.fwn { font-weight: normal !important; }
.fwb { font-weight: bold !important; }
.fsi { font-style: italic !important; }
// 文本转换
.ttc{ text-transform: capitalize; }
.ttl{ text-transform: lowercase; }
.ttu{ text-transform: uppercase; }

/* 换行 */
.norwap{ white-space: nowrap; }
.break{
  word-break: break-all;
  word-wrap: break-word;
}

// 文字过长省略
.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@for $i from 2 through 5 {
  .ellipsis-#{$i}{
    display: -webkit-box;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 块显示/隐藏 block
// ------------------------
.none{ display: none; }
.block{ display: block; }
.hidden{ visibility: hidden; }
.visible{ visibility: visible; }
.inline{ display: inline-block; }

// width, height
// ------------------------
.w-auto{ width: auto !important; }
.w-0{ width: 0px !important; }
.w-full{ width: 100% !important; }
.w-screen{ width: 100vw !important; }
.w-min-0{ min-width: 0px !important; }
.h-0{ height: 0px !important; }
.h-auto{ height: auto !important; }
.h-full{ height: 100% !important; }
.h-screen{ height: 100vh !important; }
.h-min-0{ min-height: 0px !important; }

@mixin widthDiv($num, $den) {
  .w-#{$num}\/#{$den}{
    width: math.div($num, $den) * 100% !important;
  }
}
@include widthDiv(1, 2);
@include widthDiv(1, 3);
@include widthDiv(2, 3);
@include widthDiv(1, 4);
@include widthDiv(3, 4);
@for $i from 1 to 10 {
  @include widthDiv($i, 10);

  .h-#{$i}\/10{
    height: ($i * 10) * 1% !important;
  }
}
@for $i from 1 to 12 {
  @include widthDiv($i, 12);
}

// margin, padding
// ------------------------
$gaps: 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72;
@each $g in $gaps {
  .mt-#{$g} {
    margin-top: $g + px !important;
  }
  .mr-#{$g} {
    margin-right: $g + px !important;
  }
  .mb-#{$g} {
    margin-bottom: $g + px !important;
  }
  .ml-#{$g} {
    margin-left: $g + px !important;
  }
  .pt-#{$g} {
    padding-top: $g + px !important;
  }
  .pr-#{$g} {
    padding-right: $g + px !important;
  }
  .pb-#{$g} {
    padding-bottom: $g + px !important;
  }
  .pl-#{$g} {
    padding-left: $g + px !important;
  }
  // 水平方向
  .px-#{$g} {
    padding-left: $g + px !important;
    padding-right: $g + px !important;
  }
  .mx-#{$g} {
    margin-left: $g + px !important;
    margin-right: $g + px !important;
  }
  // 垂直方向
  .py-#{$g} {
    padding-top: $g + px !important;
    padding-bottom: $g + px !important;
  }
  .my-#{$g} {
    margin-top: $g + px !important;
    margin-bottom: $g + px !important;
  }
  // 垂直、水平方向
  .pa-#{$g} {
    padding: $g + px !important;
  }
  .ma-#{$g} {
    margin: $g + px !important;
  }  
}

// flex
// ------------------------
@mixin flexible($name, $prop, $val) {
  &-#{$name} {
    display: flex;
    #{$prop}: $val
  }
  &--#{$name} {
    #{$prop}: $val
  }
}
.flex{
  display: flex;

  &-item{
    min-width: 0;
    flex: 1;
  }
  @include flexible(row, flex-direction, row);
  @include flexible(column, flex-direction, column);
  @include flexible(nowrap, flex-wrap, nowrap);
  @include flexible(wrap, flex-wrap, wrap);
  @include flexible(left, justify-content, flex-start);
  @include flexible(center, justify-content, center);
  @include flexible(right, justify-content, flex-end);
  @include flexible(between, justify-content, space-between);
  @include flexible(around, justify-content, space-around);
  @include flexible(top, align-items, flex-start);
  @include flexible(middle, align-items, center);
  @include flexible(bottom, align-items, flex-end);
  @include flexible(baseline, align-items, baseline);
  @include flexible(stretch, align-items, stretch);
  
  &-centre, &-center-middle, &-middle-center{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// clearfix
// ------------------------
.clearfix {
  zoom: 1;
  &::before,
  &::after {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }
}